<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="/js/jquery-3.6.3.js"></script>
    <!-- 引入样式 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>


<script type="text/javascript">
    AMapLoader.load({
        "key": "54d58dbba6c5391a5e267f78cefb94bd",              // 申请好的Web端开发者Key，首次调用 load 时必填
        "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        "plugins": [],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        "AMapUI": {             // 是否加载 AMapUI，缺省不加载
            "version": '1.1',   // AMapUI 版本
            "plugins": ['overlay/SimpleMarker'],       // 需要加载的 AMapUI ui插件
        },
        "Loca": {                // 是否加载 Loca， 缺省不加载
            "version": '2.0'  // Loca 版本
        },
    }).then((AMap) => {
        var map = new AMap.Map('container');
        map.addControl(new AMap.Scale());
    }).catch((e) => {
        console.error(e);  //加载错误提示
    });
</script>


<script type="text/javascript">
    window._AMapSecurityConfig = {
        securityJsCode: '5b47f1edb22e9127af2bb1b343d9ebf4',
    }
</script>
<script src="https://webapi.amap.com/loader.js"></script>

<style>
    #container {
        width: 100%;
        height: 570px;
    }
</style>

<body>

<div id="app">

    经纬<input type="text" readonly="true" id="lnglat">


    <div id="container">
        <!--map-->
        <script type="text/javascript"
                src="https://webapi.amap.com/maps?v=2.0&key=54d58dbba6c5391a5e267f78cefb94bd"></script>

        <script type="text/javascript" th:inline="javascript">
            var markers = [];

            // 地图初始化应该在地图容器div已经添加到DOM树之后
            var map = new AMap.Map('container', {
                zoom: 12.56,
                center: [121.498586, 31.239637]
            })

            // var marker = new AMap.Marker({
            //     position:[121.47715,31.231829],   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
            //     title: '北京'
            // });


            console.log(markers)
            map.add(markers)


            map.on('click', function (e) {
                document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat()
            })


            $(function () {

                // $.get("/quarters/map",function (data){
                //     // var parse = JSON.parse(data);
                //     console.log(parse)
                // })


                $.getJSON('/quarters/map', function (data) {

                    quarters.forEach(function (q) {
                        var marker;
                        if (q.longitude != null) {
                            var ll = q.longitudeLatitude
                            marker = new AMap.Marker({
                                map: map,
                                position: [ll[0], ll[1]],

                            })
                        }
                        markers.push(marker)
                    })
                })

            })

        </script>
    </div>
</div>
</body>


</html>